<template>
    <div class="page-wrapper setting-page">
        <scroll>
            <el-form class="setting-form" label-width="70px" style="padding-bottom: 20px">

                <div class="setting-form-row">

                    <el-checkbox v-model="form.autoOpen">开机自动启动</el-checkbox>

                    <el-checkbox style="margin-left: 120px" v-model="form.deskMask">桌面悬浮窗</el-checkbox>

                </div>

                <div class="setting-form-row">
                    
                    <el-form-item label="开启服务" >

                        <el-switch :disabled="lockedState" v-model="form.openServer" active-color="#13ce66" inactive-color="#ff4949"></el-switch>

                    </el-form-item>
                    
                </div>

                <el-form-item  label="设置地址" style="width: 100%;margin-bottom: 0" class="setting-form-twoRow">
                    <el-row>
                        <el-col :span="17">
                            <el-input style="margin-left: 0" size="mini" v-model="form.href"></el-input>
                        </el-col>
                        <el-col :span="5" :push="1">
                            <el-button @click="handleSelectSavePath" size="mini" type="primary">选择</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item label-width="200px"  label="设置服务器地址" style="width: 100%;margin-bottom: 0" class="setting-form-twoRow">
                    <el-row>
                        <el-col :span="14">
                            <el-input style="margin-left: 0" size="mini" v-model="form.serverPath"></el-input>
                        </el-col>
                        <el-col :span="9" :push="1">
                            <el-button-group>
                                <el-button @click="_setServerPath(form.serverPath)" size="mini" type="primary">保存</el-button>
                                <el-button @click="testServerPath" size="mini" type="primary">测试</el-button>
                            </el-button-group>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item label-width="200px"  label="设置下载地址" style="width: 100%;margin-bottom: 0" class="setting-form-twoRow">
                    <el-row>
                        <el-col :span="14">
                            <el-input style="margin-left: 0" size="mini" v-model="form.downLoadPath"></el-input>
                        </el-col>
                        <el-col :span="9" :push="1">
                            <el-button @click="_setDownloadPath(form.downLoadPath)" size="mini" type="primary">保存</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>

            </el-form>
        </scroll>
    </div>
</template>
<script>
    import dev from  "@/server/dev.js"
    import scroll from "@/components/base/pcScroll.vue";
    import { mapGetters,mapMutations }  from "vuex";
    import _ from "lodash"
    import Store from "store";
    import Api from "@/api/index.js"
    import $ from "jquery";

    export default {
        props: {},
        data() {
            return {
                form:{
                    href:"",
                    autoOpen:Store.get("autoOpen"),
                    deskMask:Store.get("deskMask"),
                    openServer:true,
                    serverPath:Store.get("serverPath"),
                    downLoadPath:""
                },
                lockedState:false
            }
        },
        methods: {
            handleSelectSavePath(){
                this.dialog.showOpenDialog({
                    //默认路径
                    defaultPath :'../Desktop',
                    //选择操作，此处是打开文件夹
                    properties: [
                        'openDirectory',
                    ],
                    //过滤条件
                    filters: [
                        { name: 'All', extensions: ['*'] },
                    ]
                },(res)=>{
                    //回调函数内容，此处是将路径内容显示在input框内
                    if(res){
                        this.form.href = res[0];
                        this.saveConfig();
                    }
                })
            },
            saveConfig(){
                this.setUrl(this.form.href)
            },
            switchServer(val){
                if(val){
                    dev();
                    Api.openServer().then(Rs =>{
                        this.$message.success(Rs.msg);
                    });
                }else{
                    Api.closeServer().then(Rs =>{
                        this.$message.success(Rs.msg);
                        this.lockedState = true;
                        setTimeout(()=>{
                            this.lockedState = false
                        },5000)
                    });
                }
            },
            testServerPath(){
                $.post(`${this.form.serverPath}/api/getFileDays`).done(Rs=>{
                    this.$message.success("连接成功！")
                }).fail(Rs =>{
                    this.$message.error("连接失败...")
                })
            },
            _setServerPath(val){
                this.setServerPath(val);
                this.$message.success("保存成功!")
            },
            _setDownloadPath(val){
                this.setDownloadPath(val);
                this.$message.success("保存成功!")
            },
            ...mapMutations({
                "setUrl":"SET_URL",
                "setAutoOpen":"SET_AUTOOPEN",
                "setDeskMask":"SET_DESKMASK",
                "setServerPath":"SET_SERVERPATH",
                "setDownloadPath":"SET_DOWNLOADPATH"
            })
        },
        components: {scroll},
        beforeCreate: function () {

        },
        created: function () {
          _.assign(this.form,_.cloneDeep(this.config));
        },
        beforeMount: function () {

        },
        mounted(){
            this.form.href = this.url;
            this.form.downLoadPath = this.downLoadPath
        },
        computed:{
            dialog(){
                return this.$electron.remote.dialog
            },
            ...mapGetters(['url','config','downLoadPath'])
        },
        watch:{
            "form.autoOpen":function (val) {
                this.setAutoOpen(val)
            },
            "form.deskMask":function (val) {
                this.setDeskMask(val);
            },
            "form.openServer":function (val) {
                this.switchServer(val);
            }
        }
    }
</script>

<style lang="less">
    .setting-page{
        padding: 0 77px;
        .page-title{
            padding: 10px 0 30px;
        }
        .setting-form{
            width: 100%;
            &-row{
                display: flex;
                width: 100%;
                margin-top:30px;
                align-items: center;
            }
            .el-form-item__label,.el-checkbox__label{
                color: #fff;
            }

            &-twoRow{
                .el-form-item__label{
                    float: none;
                    display: inline-block;
                    text-align: left;
                }
                .el-form-item__content{
                    margin-left: 0!important;
                }
            }
        }
    }
</style>
